<template>
  <div class="mx-auto flex flex-wrap px-[16px] md:max-w-[1648px] md:px-[24px]">
    <div class="flex-1" style="height: auto !important">
      <h1 class="-mb-[10px] text-[32px]/[36px] font-bold md:text-[41px]/[42px]">
        <font style="vertical-align: inherit">{{ Title }}</font>
      </h1>
      <div
        class="with-filter-layout mt-[16px] md:mt-[20px]"
        style="height: auto !important"
      >
        <section
          class="mb-[10px] flex items-center justify-end gap-[16px] md:justify-between"
        >
          <div>
            <div class="dropdown cursor-pointer cursor-pointer lg:hidden">
              <div
                class="flex items-center justify-between px-[12px] h-[28px] border-[1px] border-solid border-[#eee] rounded-[8px]"
              >
                <span class="mr-[10px] text-[14px]">Filters</span
                ><i
                  class="mt-[-2px] inline-block h-[16px] w-[16px] self-center bg-[url('/image/icon-down.svg')]"
                ></i>
              </div>
              <div class="hidden"></div>
            </div>
            <div class="filters lg:hidden">
              <div
                class="drawer fixed inset-0 z-[--z-index-popup-base] touch-auto hidden pointer-events-none opacity-0"
              >
                <div
                  class="absolute inset-0 left-0 top-0 z-[--z-index-mask] block h-full w-full bg-[--color-bg-mask] cursor-pointer opacity-0"
                ></div>
                <div
                  class="opacity-1 absolute bottom-0 right-0 top-0 z-[--z-index-popup-base] h-full max-w-[100vw] bg-white shadow-[--box-shadow-drawer-right] translate-x-full"
                >
                  <div
                    class="grid h-full w-screen max-w-[100vw] grid-flow-row grid-rows-[56px_1fr_72px] overflow-y-auto pb-[env(safe-area-inset-bottom_,_20px)]"
                  >
                    <div
                      class="flex h-[56px] items-center justify-between border-b-[1px] border-solid border-[var(--color-split)] px-[16px] md:px-[24px] 2xl:px-[40px]"
                    >
                      <div
                        class="flex items-center justify-center gap-[4px] text-[18px] font-semibold md:text-[20px]"
                      >
                        <i
                          class="inline-block h-[24px] w-[24px] cursor-pointer self-center bg-[url('/image/icon-close-dark-gray.svg')] bg-contain bg-no-repeat md:h-[28px] md:w-[28px]"
                        ></i
                        >Filters
                      </div>
                    </div>
                    <div class="mt-[12px] px-[16px] md:px-[24px] 2xl:px-[40px]">
                      <section class="filter-by-price">
                        <div class="dropdown cursor-pointer">
                          <div class="flex items-center justify-between">
                            <span
                              class="text-[14px] font-semibold md:text-[18px]"
                              >Price</span
                            ><i
                              class="mt-[-2px] inline-block h-[16px] w-[16px] self-center bg-[url('/image/icon-down.svg')] hidden"
                            ></i>
                          </div>
                          <div class="block pt-[8px]">
                            <section class="radio-group hidden lg:block">
                              <section class="mb-[16px] flex last:mb-0">
                                <label
                                  class="inline-flex cursor-pointer items-center"
                                  ><span class="relative"
                                    ><input
                                      class="z-1 absolute inset-0 cursor-pointer opacity-0"
                                      type="radio" /><span
                                      class="z-2 radio-inner relative flex h-[16px] w-[16px] select-none items-center justify-center rounded-[50%] border-[1px] border-[#666666]"
                                    ></span></span
                                  ><span
                                    class="mx-[6px] text-[#666] text-[14px]"
                                    >Under $50</span
                                  ></label
                                >
                              </section>
                              <section class="mb-[16px] flex last:mb-0">
                                <label
                                  class="inline-flex cursor-pointer items-center"
                                  ><span class="relative"
                                    ><input
                                      class="z-1 absolute inset-0 cursor-pointer opacity-0"
                                      type="radio" /><span
                                      class="z-2 radio-inner relative flex h-[16px] w-[16px] select-none items-center justify-center rounded-[50%] border-[1px] border-[#666666]"
                                    ></span></span
                                  ><span
                                    class="mx-[6px] text-[#666] text-[14px]"
                                    >$50 To $100</span
                                  ></label
                                >
                              </section>
                              <section class="mb-[16px] flex last:mb-0">
                                <label
                                  class="inline-flex cursor-pointer items-center"
                                  ><span class="relative"
                                    ><input
                                      class="z-1 absolute inset-0 cursor-pointer opacity-0"
                                      type="radio" /><span
                                      class="z-2 radio-inner relative flex h-[16px] w-[16px] select-none items-center justify-center rounded-[50%] border-[1px] border-[#666666]"
                                    ></span></span
                                  ><span
                                    class="mx-[6px] text-[#666] text-[14px]"
                                    >$100 To $200</span
                                  ></label
                                >
                              </section>
                              <section class="mb-[16px] flex last:mb-0">
                                <label
                                  class="inline-flex cursor-pointer items-center"
                                  ><span class="relative"
                                    ><input
                                      class="z-1 absolute inset-0 cursor-pointer opacity-0"
                                      type="radio" /><span
                                      class="z-2 radio-inner relative flex h-[16px] w-[16px] select-none items-center justify-center rounded-[50%] border-[1px] border-[#666666]"
                                    ></span></span
                                  ><span
                                    class="mx-[6px] text-[#666] text-[14px]"
                                    >$200 &amp; Above</span
                                  ></label
                                >
                              </section>
                            </section>
                            <ol
                              class="flex flex-wrap items-center justify-start gap-[8px] text-[14px] font-normal md:text-[18px] lg:hidden"
                            >
                              <li
                                class="flex flex-wrap items-center justify-center break-all rounded-[12px] border-[1px] border-solid border-[#eee] px-[12px] py-2 md:h-[48px]"
                              >
                                Under $50
                              </li>
                              <li
                                class="flex flex-wrap items-center justify-center break-all rounded-[12px] border-[1px] border-solid border-[#eee] px-[12px] py-2 md:h-[48px]"
                              >
                                $50 To $100
                              </li>
                              <li
                                class="flex flex-wrap items-center justify-center break-all rounded-[12px] border-[1px] border-solid border-[#eee] px-[12px] py-2 md:h-[48px]"
                              >
                                $100 To $200
                              </li>
                              <li
                                class="flex flex-wrap items-center justify-center break-all rounded-[12px] border-[1px] border-solid border-[#eee] px-[12px] py-2 md:h-[48px]"
                              >
                                $200 &amp; Above
                              </li>
                            </ol>
                            <section class="mt-[16px]">
                              <section class="flex max-w-full items-center">
                                <input
                                  autocomplete="off"
                                  role="spinbutton"
                                  step="1"
                                  class="input-number rounded-[8px] border border-solid border-[#DDD] px-[12px] py-[9px] text-[14px] outline-none placeholder:text-[#999] focus:border-black w-[10px] lg:h-[40px] lg:w-[105px] md:h-[48px] flex-1 text-[14px] md:text-[18px]"
                                  placeholder="Min"
                                  type="number"
                                  min="0"
                                  value=""
                                /><span
                                  class="mx-[10px] inline-block h-[1px] w-[10px] bg-[#ddd]"
                                ></span
                                ><input
                                  autocomplete="off"
                                  role="spinbutton"
                                  step="1"
                                  class="input-number rounded-[8px] border border-solid border-[#DDD] px-[12px] py-[9px] text-[14px] outline-none placeholder:text-[#999] focus:border-black w-[10px] lg:h-[40px] lg:w-[105px] md:h-[48px] flex-1 text-[14px] md:text-[18px]"
                                  placeholder="Max"
                                  type="number"
                                  min="0"
                                  value=""
                                />
                              </section>
                              <button
                                class="text-[length:--button-content-font-size flex items-center justify-center rounded-[--button-border-radius] px-[--button-padding-inline] py-[--button-padding-block] mt-[16px] hidden h-[40px] w-full !rounded-[8px] bg-[#CCC] px-[14px] text-[14px] text-white lg:flex cursor-default hidden"
                              >
                                Apply
                              </button>
                            </section>
                          </div>
                        </div>
                      </section>
                      <div class="mt-[24px]">
                        <section class="filter-by-brand">
                          <div class="dropdown cursor-pointer">
                            <div class="flex items-center justify-between">
                              <span
                                class="text-[14px] font-semibold md:text-[18px]"
                                >Brand</span
                              ><i
                                class="mt-[-2px] inline-block h-[16px] w-[16px] self-center bg-[url('/image/icon-down.svg')] hidden"
                              ></i>
                            </div>
                            <div class="block pt-[8px]">
                              <section
                                class="radio-group scrollbar max-h-[170px] min-h-[170px] overflow-x-hidden overflow-y-scroll hidden lg:block"
                              >
                                <section class="mb-[16px] flex last:mb-0">
                                  <label
                                    class="inline-flex cursor-pointer items-center"
                                    ><span class="relative"
                                      ><input
                                        class="z-1 absolute inset-0 cursor-pointer opacity-0"
                                        type="radio" /><span
                                        class="z-2 radio-inner relative flex h-[16px] w-[16px] select-none items-center justify-center rounded-[50%] border-[1px] border-[#666666]"
                                      ></span></span
                                    ><span
                                      class="mx-[6px] text-[#666] first-letter:uppercase text-[14px]"
                                      >Boneco|BONECO</span
                                    ></label
                                  >
                                </section>
                              </section>
                              <ol
                                class="flex flex-wrap items-center justify-start gap-[8px] text-[14px] font-normal md:text-[18px] lg:hidden"
                              >
                                <li
                                  class="flex flex-wrap items-center justify-center break-all rounded-[12px] border-[1px] border-solid border-[#eee] px-[12px] py-2 md:h-[48px]"
                                >
                                  Boneco|BONECO
                                </li>
                              </ol>
                            </div>
                          </div>
                          <div
                            class="mt-[23px] h-[1px] w-full bg-[#eee] hidden lg:block"
                          ></div>
                        </section>
                      </div>
                    </div>
                    <button
                      class="text-[length:--button-content-font-size flex items-center justify-center rounded-[--button-border-radius] px-[--button-padding-inline] py-[--button-padding-block] mx-[16px] mt-[16px] h-[44px] !rounded-[8px] bg-[#CCC] px-[14px] text-[14px] text-white md:flex md:h-[48px] md:text-[18px]"
                    >
                      Apply
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>
        <section
          class="relative flex max-w-full"
          style="height: auto !important"
        >
          <section
            class="category-tree sticky top-[92px] hidden h-fit lg:block mr-[24px] w-[236px] flex-[0_0_236px] xl:flex-[0_0_236px]"
          >
            <h2 class="text-[16px] font-semibold">Filter By</h2>
            <div class="my-[23px] h-[1px] w-full bg-[#eee]"></div>
            <section class="filter-by-price">
              <div class="dropdown cursor-pointer">
                <div class="flex items-center justify-between">
                  <span class="text-[14px] font-semibold md:text-[18px]"
                    >Price</span
                  ><i
                    class="mt-[-2px] inline-block h-[16px] w-[16px] self-center bg-[url('/image/icon-down.svg')] hidden"
                  ></i>
                </div>
                <div class="block pt-[8px]">
                  <el-radio-group v-model="priceState" @change="changePrice">
                    <el-radio label="Under $50" size="large"
                      >Under $50</el-radio
                    >
                    <el-radio label="$50 To $100" size="large"
                      >$50 To $100</el-radio
                    >
                    <el-radio label="$100 To $200" size="large"
                      >$100 To $200</el-radio
                    >
                    <el-radio label="$200 & Above" size="large"
                      >$200 & Above</el-radio
                    >
                  </el-radio-group>
                  <section class="flex max-w-full items-center">
                    <el-input
                      v-model="minValue"
                      style="width: 105px"
                      placeholder="Min"
                      @input="onInput1"
                    />
                    -
                    <el-input
                      v-model="maxValue"
                      style="width: 105px"
                      placeholder="Max"
                      @input="onInput2"
                      @change="onChange"
                    />
                  </section>
                  <button
                    @click="onClickAddPrice"
                    v-if="
                      (Number(minValue) > 0) &
                      (Number(maxValue) > 0) &
                      (Number(maxValue) >= Number(minValue))
                    "
                    class="text-[length:--button-content-font-size flex items-center justify-center rounded-[--button-border-radius] px-[--button-padding-inline] py-[--button-padding-block] mt-[16px] hidden h-[40px] w-full !rounded-[8px] !bg-[#111] px-[14px] text-[14px] text-white lg:flex cursor-default hidden"
                  >
                    Apply
                  </button>
                  <button
                    v-else
                    class="text-[length:--button-content-font-size flex items-center justify-center rounded-[--button-border-radius] px-[--button-padding-inline] py-[--button-padding-block] mt-[16px] hidden h-[40px] w-full !rounded-[8px] bg-[#CCC] px-[14px] text-[14px] text-white lg:flex cursor-default hidden"
                  >
                    Apply
                  </button>
                </div>
              </div>
            </section>
            <div class="my-[23px] h-[1px] w-full bg-[#eee]"></div>
            <section class="filter-by-brand">
              <div class="dropdown cursor-pointer">
                <div class="flex items-center justify-between">
                  <span class="text-[14px] font-semibold md:text-[18px]"
                    ><font style="vertical-align: inherit"
                      ><font style="vertical-align: inherit">Brand</font></font
                    ></span
                  ><i
                    class="mt-[-2px] inline-block h-[16px] w-[16px] self-center bg-[url('/image/icon-down.svg')] hidden"
                  ></i>
                </div>
                <div class="block pt-[8px]">
                  <section
                    class="radio-group scrollbar max-h-[170px] min-h-[170px] overflow-x-hidden overflow-y-scroll hidden lg:block"
                  >
                    <el-radio-group v-model="brandState" @change="changeBrand">
                      <el-radio label="Boneco|BONECO" size="large"
                        >Boneco|BONECO</el-radio
                      ><br />
                      <el-radio label="AF" size="large">AF</el-radio><br />
                      <el-radio label="Pereysi" size="large">Pereysi</el-radio
                      ><br />
                      <el-radio
                        label="PARIS RHÔNE|Paris Rhône|Unbranded|Paris-Rhône|GG|Does not
                      apply|Coolfiqu|AMEIFU|Paris Rhone"
                        size="large"
                        >PARIS RHÔNE|Paris Rhône|Unbranded|Paris-Rhône|GG|Does
                        not apply|Coolfiqu|AMEIFU|Paris Rhone</el-radio
                      >
                    </el-radio-group>
                  </section>
                </div>
              </div>
              <div
                class="mt-[23px] h-[1px] w-full bg-[#eee] hidden lg:block"
              ></div>
            </section>
          </section>

          <section class="flex-1" style="height: auto !important">
            <section
              class="selected-filters flex flex-wrap items-center justify-start gap-[24px] mb-[16px] md:mb-[24px]"
            >
              <div class="flex gap-2">
                <el-tag
                  v-for="tag in tags"
                  :key="tag.name"
                  closable
                  type="danger"
                  size="large"
                  @close="closePrice(tag)"
                  style="margin-right: 10px"
                >
                  {{ tag.name }}
                </el-tag>
              </div>
              <span
                v-if="tags.length > 0"
                @click="closeAll()"
                class="hidden cursor-pointer text-[14px] text-[#666] underline hover:text-black lg:block"
                >Clear all filters</span
              >
            </section>

            <section
              v-if="options1.length > 0"
              class="text-[28px] font-semibold"
            >
              <ul
                class="grid grid-cols-1 gap-x-[12px] gap-y-[16px] sm:grid-cols-2 md:grid-cols-3 md:gap-x-[32px] md:gap-y-[32px] lg:grid-cols-4"
              >
                <a
                  v-for="(item, index) in options1"
                  class="group relative flex w-[calc(50vw-22px)] shrink-0 cursor-pointer flex-col gap-[12px] md:w-auto md:max-w-[218px] md:flex-1 md:max-w-[224px]"
                  href="/pd/ffad2617f702e2429f9c52c10f2490e5"
                  ><div class="flex aspect-square items-center justify-center">
                    <div
                      class="aspect-square w-9/12 duration-200 ease-in-out group-hover:scale-105"
                    >
                      <img
                        class="h-full max-h-full w-full max-w-full object-contain"
                        loading="lazy"
                        src="https://img.1weeklyads.com/ccsimg/dcs/img_tools/dcs_img_1703712698_af7d7e8cbecdede7edb3142e9e773f4d.webp"
                        :alt="item.title"
                      />
                    </div>
                    <div
                      class="absolute left-0 right-0 top-0 aspect-square rounded-2xl bg-[#333536] opacity-5"
                    ></div>
                  </div>
                  <p
                    class="line-clamp-2 h-[40px] px-[8px] text-[15px]/[20px] font-normal"
                  >
                    <font style="vertical-align: inherit">{{
                      item.title
                    }}</font>
                  </p>
                  <p class="line-clamp-1 px-[8px] text-base font-bold">
                    <font style="vertical-align: inherit">$ </font
                    ><font style="vertical-align: inherit">99</font>
                  </p>
                  <p class="px-[8px] text-[14px]/[20px] font-normal">
                    <font style="vertical-align: inherit">在</font
                    ><font style="vertical-align: inherit">{{
                      item.quantityProduct
                    }}</font
                    ><font style="vertical-align: inherit">家商店进行比较</font
                    ><svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="14"
                      height="14"
                      viewBox="0 0 14 14"
                      fill="none"
                      data-icon="arrow"
                      class="ml-[4px] inline-block"
                    >
                      <path
                        d="M9.43408 6.4149L6.30508 3.28589L7.13003 2.46094L11.6673 6.99823L7.13003 11.5355L6.30508 10.7105L9.43408 7.58157H2.33398V6.4149H9.43408Z"
                        fill="black"
                        class="w-[12px] h-[12px] md:h-[14px] md:w-[14px]"
                      ></path>
                    </svg></p
                ></a>
              </ul>
              <section
                class="mx-auto mt-[20px] flex h-[40px] w-fit cursor-pointer items-center justify-center rounded-[12px] bg-[#F6F6F6] px-[20px] text-[14px] font-normal hover:bg-[#D2D2D2] md:mt-[32px] md:h-[44px] md:px-[32px]"
              >
                <font style="vertical-align: inherit"
                  ><font style="vertical-align: inherit">显示更多</font></font
                >
              </section>
            </section>
            <section
              v-else
              class="search-empty mx-auto my-[32px] flex max-w-full flex-col items-center justify-center md:my-[70px]"
            >
              <img
                alt="no result"
                src="/public/img/icon-search-detail.png"
                class="w-[100px] md:w-[150px]"
              />
              <h3
                class="mt-[8px] flex items-center justify-center text-[18px] font-semibold leading-[20px] text-[#666] md:mt-[12px]"
              >
                Whoops!
              </h3>
              <p
                class="mt-[4px] text-[14px] font-normal text-[#999] md:mt-[12px]"
              >
                No Results Found
              </p>
            </section>
            <div
              v-if="options1.length > 0"
              class="my-[30px]"
              style="height: auto !important"
            >
              <p class="ad-title text-[12px]/[16px] font-normal text-[#333]">
                ADVERTISEMENT
              </p>
              <div class="ad-afc min-h-[280px] w-full">
                <!-- buy-1weeklyads-category2-middle -->
                <ins
                  class="adsbygoogle"
                  style="display: block"
                  data-ad-client="ca-pub-2747343876538333"
                  data-ad-slot="2368466516"
                  data-ad-format="auto"
                  data-full-width-responsive="true"
                ></ins>
              </div>
            </div>
            <section
              v-if="options1.length > 0"
              class="card max-w-vw md:max-w-full mb-[40px]"
              id=""
            >
              <h1 class="mb-[16px] flex items-center justify-between">
                <span
                  class="text-[20px]/[24px] font-bold md:text-[26px]/[32px] md:font-semibold"
                  ><font style="vertical-align: inherit"
                    ><font style="vertical-align: inherit">Related Products</font></font
                  ></span
                ><a
                  href=""
                  class="cursor-pointer text-[14px] font-normal text-[#0B051D] underline md:text-base md:hover:no-underline"
                ></a>
              </h1>
              <div
                class="scrollbar-hide flex gap-x-3 gap-y-4 overflow-x-scroll md:grid md:gap-8 md:grid-cols-4"
              >
                <a
                  v-for="(item2, index2) in options2"
                  :key="index2 + 'item2'"
                  class="group relative flex w-[calc(50vw-22px)] shrink-0 cursor-pointer flex-col gap-[12px] md:w-auto md:max-w-[218px] md:flex-1"
                  href="/pd/fffc2d325a6aa1a6d2fb8cbc3565340d"
                  ><div class="flex aspect-square items-center justify-center">
                    <div
                      class="aspect-square w-9/12 duration-200 ease-in-out group-hover:scale-105"
                    >
                      <img
                        class="h-full max-h-full w-full max-w-full object-contain"
                        loading="lazy"
                        src="https://img.1weeklyads.com/ccsimg/dcs/img_tools/dcs_img_1703712698_af7d7e8cbecdede7edb3142e9e773f4d.webp"
                        :alt="item2.title"
                      />
                    </div>
                    <div
                      class="absolute left-0 right-0 top-0 aspect-square rounded-2xl bg-[#333536] opacity-5"
                    ></div>
                  </div>
                  <p
                    class="line-clamp-2 h-[40px] px-[8px] text-[15px]/[20px] font-normal"
                  >
                    <font style="vertical-align: inherit"
                      ><font style="vertical-align: inherit">{{
                        item2.title
                      }}</font></font
                    >
                  </p>
                  <p class="line-clamp-1 px-[8px] text-base font-bold">
                    <font style="vertical-align: inherit"></font
                    ><!-- --><font style="vertical-align: inherit"
                      ><font style="vertical-align: inherit">44</font
                      ><font style="vertical-align: inherit">美元</font></font
                    >
                  </p>
                  <p class="px-[8px] text-[14px]/[20px] font-normal">
                    <font style="vertical-align: inherit"></font
                    ><!-- --><font style="vertical-align: inherit"
                      ><font style="vertical-align: inherit"
                        >在{{ item2.quantityProduct }}</font
                      ></font
                    ><!-- --><font style="vertical-align: inherit"
                      ><font style="vertical-align: inherit">家商店</font
                      ><font style="vertical-align: inherit">比较</font></font
                    ><svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="14"
                      height="14"
                      viewBox="0 0 14 14"
                      fill="none"
                      data-icon="arrow"
                      class="ml-[4px] inline-block"
                    >
                      <path
                        d="M9.43408 6.4149L6.30508 3.28589L7.13003 2.46094L11.6673 6.99823L7.13003 11.5355L6.30508 10.7105L9.43408 7.58157H2.33398V6.4149H9.43408Z"
                        fill="black"
                        class="w-[12px] h-[12px] md:h-[14px] md:w-[14px]"
                      ></path>
                    </svg></p
                ></a>
              </div>
            </section>
            <section class="card max-w-vw md:max-w-full mb-[40px]" id="">
              <h1 class="mb-[16px] flex items-center justify-between">
                <span
                  class="text-[20px]/[24px] font-bold md:text-[26px]/[32px] md:font-semibold"
                  ><font style="vertical-align: inherit">Popular Products</font></span
                ><a
                  href=""
                  class="cursor-pointer text-[14px] font-normal text-[#0B051D] underline md:text-base md:hover:no-underline"
                ></a>
              </h1>
              <div
                class="scrollbar-hide flex gap-x-3 gap-y-4 overflow-x-scroll md:grid md:gap-8 md:grid-cols-4"
              >
                <a
                  v-for="(item2, index2) in options2"
                  :key="index2 + 'item2'"
                  class="group relative flex w-[calc(50vw-22px)] shrink-0 cursor-pointer flex-col gap-[12px] md:w-auto md:max-w-[218px] md:flex-1"
                  href="/pd/fffc2d325a6aa1a6d2fb8cbc3565340d"
                  ><div class="flex aspect-square items-center justify-center">
                    <div
                      class="aspect-square w-9/12 duration-200 ease-in-out group-hover:scale-105"
                    >
                      <img
                        class="h-full max-h-full w-full max-w-full object-contain"
                        loading="lazy"
                        src="https://img.1weeklyads.com/ccsimg/dcs/img_tools/dcs_img_1703712698_af7d7e8cbecdede7edb3142e9e773f4d.webp"
                        :alt="item2.title"
                      />
                    </div>
                    <div
                      class="absolute left-0 right-0 top-0 aspect-square rounded-2xl bg-[#333536] opacity-5"
                    ></div>
                  </div>
                  <p
                    class="line-clamp-2 h-[40px] px-[8px] text-[15px]/[20px] font-normal"
                  >
                    <font style="vertical-align: inherit">{{
                      item2.title
                    }}</font>
                  </p>
                  <p class="line-clamp-1 px-[8px] text-base font-bold">
                    <font style="vertical-align: inherit">{{
                      item2.moneyValue
                    }}</font
                    ><font style="vertical-align: inherit">美元</font>
                  </p>
                  <p class="px-[8px] text-[14px]/[20px] font-normal">
                    <font style="vertical-align: inherit"
                      >在{{ item2.quantityProduct }}</font
                    ><font style="vertical-align: inherit">家商店</font
                    ><font style="vertical-align: inherit">比较</font
                    ><svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="14"
                      height="14"
                      viewBox="0 0 14 14"
                      fill="none"
                      data-icon="arrow"
                      class="ml-[4px] inline-block"
                    >
                      <path
                        d="M9.43408 6.4149L6.30508 3.28589L7.13003 2.46094L11.6673 6.99823L7.13003 11.5355L6.30508 10.7105L9.43408 7.58157H2.33398V6.4149H9.43408Z"
                        fill="black"
                        class="w-[12px] h-[12px] md:h-[14px] md:w-[14px]"
                      ></path>
                    </svg></p
                ></a>
              </div>
            </section>
          </section>
        </section>
      </div>
    </div>
    <aside
      class="w-full shrink-0 md:ml-[40px] md:w-[300px]"
      style="height: auto !important"
    >
      <div class="sticky" style="height: auto !important">
        <p class="ad-title text-[12px]/[16px] font-normal text-[#333]">
          ADVERTISEMENT
        </p>
        <div class="ad-afc min-h-[280px] w-full">
          <!-- buy-1weeklyads-category2-right -->
          <ins
            class="adsbygoogle"
            style="display: block; height: 600px"
            data-ad-client="ca-pub-2747343876538333"
            data-ad-slot="3486107060"
            data-ad-format="auto"
            data-full-width-responsive="true"
            data-adsbygoogle-status="done"
            data-ad-status="unfilled"
            ><div
              id="aswift_2_host"
              style="
                border: none;
                height: 600px;
                width: 300px;
                margin: 0px;
                padding: 0px;
                position: relative;
                visibility: visible;
                background-color: transparent;
                display: inline-block;
                overflow: visible;
              "
            >
              <iframe
                id="aswift_2"
                name="aswift_2"
                style="
                  left: 0;
                  position: absolute;
                  top: 0;
                  border: 0;
                  width: 300px;
                  height: 600px;
                "
                sandbox="allow-forms allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-top-navigation-by-user-activation"
                width="300"
                height="600"
                frameborder="0"
                marginwidth="0"
                marginheight="0"
                vspace="0"
                hspace="0"
                allowtransparency="true"
                scrolling="no"
                src=""
                data-google-container-id="a!3"
                tabindex="0"
                title="Advertisement"
                aria-label="Advertisement"
                data-load-complete="true"
              ></iframe></div
          ></ins>
        </div>
      </div>
    </aside>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, computed, reactive, ref, watch } from "vue";
import { useRoute } from "vue-router";
import type { TagProps } from "element-plus";
import EventBus from "@/plugins/Bus";
import { getProductNameSearch, getSeeAllByClick } from "@/apis/index";
const tags = ref([]);
const route = useRoute();

const options1 = ref([]);
const options2 = ref([]);
const options3 = ref([
  {
    name: "品牌1",
  },
  {
    name: "品牌1",
  },
  {
    name: "品牌1",
  },
  {
    name: "品牌1",
  },
]);
const priceState = ref(null);
const brandState = ref(null);
const minValue = ref(null);
const maxValue = ref(null);
const Title = ref("");
watch(
  () => route.fullPath,
  async (newValue, oldValue) => {
    options1.value = [];
    options2.value = [];
    if (route.query.type === "1") {
      setTimeout(() => {
        getSeeAllByClickData(route.query);
      }, 1000);
    } else if (route.query.type === "2") {
      setTimeout(() => {
        getSearchData(route.query);
      }, 1000);
    }
  },
  { immediate: true }
);
const getSeeAllByClickData = async (data) => {
  Title.value = data.title;
  let res = await getSeeAllByClick(
    data.categoryId,
    data.pageSize,
    data.pageNum
  );

  if (res.data.code == 200) {
    options1.value = res.data.data.Result;
    options2.value = res.data.data.PopularProducts;
  }
};
const getSearchData = async (data) => {
  Title.value = "Results for " + data.name;
  let res = await getProductNameSearch(data.name);
  if (res.data.code == 200) {
    options1.value = res.data.data.Result;
    options2.value = res.data.data.PopularProducts;
  }
};
//判断输入input值是否为数字以及大小
const onInput1 = (event) => {
  minValue.value = event.replace(/\D/g, "");
  if (Number(minValue.value) <= 0) {
    minValue.value = null;
  }
};
const onInput2 = (event) => {
  maxValue.value = event.replace(/\D/g, "");
  if (Number(maxValue.value) <= 0) {
    maxValue.value = null;
  }
};
const onChange = () => {
  if (Number(maxValue.value) < Number(minValue.value)) {
    maxValue.value = null;
  }
};
const onClickAddPrice = () => {
  var data1 = [];
  tags.value.forEach((item) => {
    if (item.type !== "price") {
      data1.push(item);
    }
  });
  tags.value = data1;
  tags.value.push({
    name: "$" + Number(minValue.value) + "To" + "$" + Number(maxValue.value),
    type: "price",
  });
};
//选择价格
const changePrice = () => {
  var data1 = [];
  tags.value.forEach((item) => {
    if (item.type !== "price") {
      data1.push(item);
    }
  });
  tags.value = data1;
  tags.value.push({ name: priceState.value, type: "price" });
  minValue.value = null;
  maxValue.value = null;
};
//选择品牌
const changeBrand = () => {
  var data1 = [];
  tags.value.forEach((item) => {
    if (item.type !== "brand") {
      data1.push(item);
    }
  });
  tags.value = data1;
  tags.value.push({ name: brandState.value, type: "brand" });
};
//单个关闭
const closePrice = (e) => {
  var data1 = [];
  tags.value.forEach((item) => {
    if (item.name !== e.name) {
      data1.push(item);
    }
  });
  tags.value = data1;
  if (e.type === "price") {
    priceState.value = null;
  }
  if (e.type === "brand") {
    brandState.value = null;
  }
};
//关闭全部
const closeAll = () => {
  tags.value = [];
  brandState.value = null;
  priceState.value = null;
  minValue.value = null;
  maxValue.value = null;
};
</script>
<style>
.el-radio-group {
  display: block;
}
.el-radio {
  display: block;
  line-height: 30px;
}
.el-radio__label {
  display: inline-block;
  white-space: pre-wrap !important;
  vertical-align: top;
}
</style>
